import { withPixiApp, Container } from '@inlet/react-pixi'
import React from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'
import PropTypes from 'prop-types'
import Constants from 'utils'
import { Point } from '../brushes'

const PrepareView = ({ scale, prePareLabel }) => {
  return (
    <Container>
      {
        prePareLabel.points.map((point, index) => (
          <Point
            key={index}
            point={point}
            scale={scale}
            innerColor={Constants.normalPointsColor.inner}
            outerColor={Constants.normalPointsColor.outer}
          />
        ))
      }
    </Container>
  )
}

PrepareView.propTypes = {
  scale: PropTypes.number.isRequired,
  prePareLabel: PropTypes.object,
}

PrepareView.defaultProps = {
  prePareLabel: undefined,
}

const mapStateToProps = state => ({
  prePareLabel: projectDuck.selectors.prePareLabel(state),
})

export default withPixiApp(connect(mapStateToProps)(PrepareView))
